<template>
    <div class="countdiv">
        <h1>人员列表</h1>
        <h3 style="color:red">Count组件求和为：{{ sum }}</h3>
        <h3 style="color:red">列表中第一个人的名字：{{ firstPName }}</h3>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="addPerson">添加</button>
        <button @click="addPersonwithW">只添加姓王的</button>
        <button @click="addPersonwithServe">从服务中添加</button>
        <ul>
            <li v-for="p in pList" :key="p.id">
                <!-- <img :src="p.picurl" /> -->
                <span style="margin-left: 10%;">{{ p.name }} - 歌手：{{ p.artistsname }} </span>
                <span v-if="p.url"> </br> <audio :id="p.id" :src="p.url" controls></audio> </span>
                <span style="margin-left: 1%;" v-else>[无音乐信息]</span>
            </li>
        </ul>




    </div>
</template>
<script>
import { nanoid } from 'nanoid'
export default {
    name: 'PersonModule',
    comments: {},
    data() {
        return {
            name: '',
        }
    },
    methods: {
        addPerson() {
            const personObj = { id: nanoid(), name: this.name, artistsname: this.name }
            this.$store.commit("PersonModule/AddPerson", personObj)
            this.name = ''
        },
        addPersonwithW() {
            const personObj = { id: nanoid(), name: this.name, artistsname: this.name }
            this.$store.dispatch("PersonModule/addPersonByWName", personObj)
            this.name = ''
        },
        addPersonwithServe() {
            this.$store.dispatch("PersonModule/addPServer")
        },

    },
    computed: {
        sum() {
            return this.$store.state.CountModule.sum
        },
        pList() {
            return this.$store.state.PersonModule.personList
        },
        firstPName() {
            return this.$store.getters['PersonModule/firstPersonName']
        },
    },
    watch: {

    }
}
</script>
<style scoped></style>